<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>06动态生成表格并实现隔行变色</title>
	<style>
		table{border:1px solid #ddd;border-collapse: collapse;}
		td,th{border:1px solid #ddd;padding:4px;}
	</style>
	<script>
		window.onload = function(){
			var row = document.getElementById('row');
			var cell = document.getElementById('cell');
			var output = document.getElementsByClassName('output')[0];
			var btn = document.getElementsByClassName('btn')[0];

			btn.onclick = function(){
				var _row = row.value;
				var _cell = cell.value;

				var table = document.createElement('table');

				// 创建行
				for(var i=0;i<_row;i++){
					var tr = table.insertRow(i);

					// 创建列
					for(var j=0;j<_cell;j++){
						var td = tr.insertCell(j);

						// 第一列写入序号
						if(j===0){
							td.innerText = i+1;
						}
						// 最后一列加入删除按钮
						else if(j===_cell-1){
							var button = document.createElement('button');
							button.innerText = '删除';
							td.appendChild(button);

							// 给按钮绑定点击事件，删除当前行
							button.idx = i;
							button.onclick = function(){
								// var currentTr = this.parentNode.parentNode;
								// table.deleteRow(currentTr.rowIndex);
								table.deleteRow(this.idx);
							}
						}else{
							td.innerText = '单元格' + (j+1)
						}
					}
				}

				// 把表格写入.output
				// 写入前先清空
				output.innerText = '';
				output.appendChild(table);
			}
		}
	</script>
</head>
<body>
	行：<input type="text" id="row">
	列：<input type="text" id="cell">
	<button class="btn">生成表格</button>
	<div class="output"></div>
	<!-- <table class="datalist">
		<thead>
			<tr>
				<th>序号</th>
				<th>标题1</th>
				<th>标题2</th>
				<th>标题3</th>
				<th>标题4</th>
				<th>标题5</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>1</td>
				<td>单元格1</td>
				<td>单元格2</td>
				<td>单元格3</td>
				<td>单元格4</td>
				<td>单元格5</td>
				<td><button>删除</button></td>
			</tr>
			<tr>
				<td>2</td>
				<td>单元格1</td>
				<td>单元格2</td>
				<td>单元格3</td>
				<td>单元格4</td>
				<td>单元格5</td>
				<td><button>删除</button></td>
			</tr>
			<tr>
				<td>3</td>
				<td>单元格1</td>
				<td>单元格2</td>
				<td>单元格3</td>
				<td>单元格4</td>
				<td>单元格5</td>
				<td><button>删除</button></td>
			</tr>
			<tr>
				<td>4</td>
				<td>单元格1</td>
				<td>单元格2</td>
				<td>单元格3</td>
				<td>单元格4</td>
				<td>单元格5</td>
				<td><button>删除</button></td>
			</tr>
			<tr>
				<td>5</td>
				<td>单元格1</td>
				<td>单元格2</td>
				<td>单元格3</td>
				<td>单元格4</td>
				<td>单元格5</td>
				<td><button>删除</button></td>
			</tr>
			<tr>
				<td>6</td>
				<td>单元格1</td>
				<td>单元格2</td>
				<td>单元格3</td>
				<td>单元格4</td>
				<td>单元格5</td>
				<td><button>删除</button></td>
			</tr>
			<tr>
				<td>7</td>
				<td>单元格1</td>
				<td>单元格2</td>
				<td>单元格3</td>
				<td>单元格4</td>
				<td>单元格5</td>
				<td><button>删除</button></td>
			</tr>
			<tr>
				<td>8</td>
				<td>单元格1</td>
				<td>单元格2</td>
				<td>单元格3</td>
				<td>单元格4</td>
				<td>单元格5</td>
				<td><button>删除</button></td>
			</tr>
			<tr>
				<td>9</td>
				<td>单元格1</td>
				<td>单元格2</td>
				<td>单元格3</td>
				<td>单元格4</td>
				<td>单元格5</td>
				<td><button>删除</button></td>
			</tr>
			<tr>
				<td>10</td>
				<td>单元格1</td>
				<td>单元格2</td>
				<td>单元格3</td>
				<td>单元格4</td>
				<td>单元格5</td>
				<td><button>删除</button></td>
			</tr>
		</tbody>
		
	</table> -->
</body>
</html>